<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    /* 
        ajax
        ajax出现前的网页
        每一次网页内容更新，都是整个网页的更新
        ajax出现后的网页
        每一次网页内容更新，都是局部更新
        ajax是用来在网页中发起网络请求
        本机每一次发请求都会携带数据给另一台电脑(服务器)，服务器也会返回数据给本机
        ajax请求的结果(状态码)
        200   成功
        401   登录过期，身份验证失败
        404   访问路径有误(资源路径有误)
        500   服务器内部错误
    */


    //发送一个ajax请求，分4步
    //1.创建一个xhr对象
    var xhr = new XMLHttpRequest();
    console.log(xhr.readyState);//0
    //2.配置xhr对象
    //参数一：method 请求方式，get / post / delete / put
    xhr.open('get','./data.json');
    console.log(xhr.readyState);//1
    //3.设置回调函数，用来接收返回的响应数据
    //只要readystate的状态值发生改变，回调函数就会执行
    //0 请求对象已创建，但是未初始化
    //1 请求已配置，但是未发送
    //2 请求已发送，但是服务器还未返回数据
    //3 请求已发送，服务器已经在返回数据，但是数可能没有全部返回
    //4 请求已发送，数据已全部返回
    xhr.onreadystatechange = function () {
        //console.log(xhr.readyState);//2 3 4
        if (xhr.readyState == 4) {
            //console.log('请求到了数据', typeof xhr.responseText);
            console.log('请求到了数据',  JSON.parse( xhr.responseText ) );
        }

    }
    //4.发送请求
    xhr.send()
</script>